<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>群文品牌首页</title>
    <link rel="stylesheet" href="../style/weui.css"/>
    <link rel="stylesheet" href="./culture.css"/>
    <link rel="stylesheet" href="./css/swiper.css">
</head>
<body ontouchstart>

    <!-- 顶部banner -->
    <div class="header_bg" ><img src="./images/banner/brand.png" /></div>
    
    <!-- 分类显示 -->
    <div class="cat_list" style="margin-top: 15px;">
        <div class="weui-flex brand_index">
            <div class="weui-flex__item">
                <a href="./article_list.html" class="brand_item" >
                    <img src="http://qyg.fzsqyg.com/upload/201412/10/201412100918254621.png" >
                    <p> 激情广场大家唱</p>
                </a>
            </div>
            <div class="weui-flex__item">
                <a href="./article_list.html" class="brand_item">
                    <img src="http://qyg.fzsqyg.com/upload/201412/10/201412100922425349.png">
                    <p> 文化惠民活动</p>
                </a>
            </div>
        </div>

        <div class="weui-flex brand_index">
            <div class="weui-flex__item">
                <a href="./article_list.html" class="brand_item">
                    <img src="http://qyg.fzsqyg.com/upload/201412/10/201412100928358444.png" >
                    <p> 新福州人歌手大赛</p>
                </a>
            </div>
            <div class="weui-flex__item">
                <a href="./article_list.html" class="brand_item">
                    <img src="http://qyg.fzsqyg.com/upload/201412/11/201412110856323639.png">
                    <p> 海峡两岸民俗节</p>
                </a>
            </div>
        </div>


        <div class="weui-flex brand_index">
            <div class="weui-flex__item">
                <a href="./article_list.html" class="brand_item">
                    <img src="http://qyg.fzsqyg.com/upload/201511/13/201511131214327768.jpg" >
                    <p> 福州合唱音乐节</p>
                </a>
            </div>
            <div class="weui-flex__item">
                <a href="./article_list.html" class="brand_item">
                    <img src="http://qyg.fzsqyg.com/upload/201412/11/201412110856323639.png">
                    <p> 相约九日台</p>
                </a>
            </div>
        </div>

        <div class="weui-flex brand_index">
            <div class="weui-flex__item">
                <a href="./article_list.html" class="brand_item">
                    <img src="http://qyg.fzsqyg.com/upload/201412/10/201412100935359219.png" >
                    <p> 非遗校园行</p>
                </a>
            </div>
            <div class="weui-flex__item">
                <a href="./article_list.html" class="brand_item">
                    <img src="http://qyg.fzsqyg.com/upload/201412/10/201412100933376113.png">
                    <p> 文化志愿手拉手</p>
                </a>
            </div>
        </div>

    </div>




	<!-- 底部导航按钮 -->
	<div class="weui-tab" id="tab">
	    <div class="weui-tabbar">
	        <a href="./index.html" class="weui-tabbar__item">
	            <div class="weui-tabbar__icon">
	                <i class="icon-chat"></i>
	            </div>
	            <p class="weui-tabbar__label">首页</p>
	        </a>
	        <a href="javascript:;" class="weui-tabbar__item">
	            <div class="weui-tabbar__icon">
	                <i class="icon-contact"></i>
	            </div>
	            <p class="weui-tabbar__label">群文资讯</p>
	        </a>
	        <a href="javascript:;" class="weui-tabbar__item">
	            <div class="weui-tabbar__icon">
	                <i class="icon-discovery"></i>
	            </div>
	            <p class="weui-tabbar__label">非遗风采</p>
	        </a>
	        <a href="./userCenter.html" class="weui-tabbar__item">
	            <div class="weui-tabbar__icon">
	                <i class="icon-profile"></i>
	            </div>
	            <p class="weui-tabbar__label">我</p>
	        </a>
	    </div>
	</div>

    <script src="./zepto.min.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
    <script src="./js/swiper.js"></script>
</body>

<script type="text/javascript">
    $(function(){
        //initialize swiper when document ready  
        var mySwiper = new Swiper ('.swiper-container', {
          // Optional parameters
          pagination: '.swiper-pagination',//分页
          paginationClickable: true,//切换圆点
          effect: 'coverflow',
          autoplayDisableOnInteraction: false,//用户操作分页后会停止自动播放，添加这个就不会
          direction: 'horizontal',
          //autoplay:3000,
          loop: true,
          spaceBetween: 30,
        }) 

        $('.weui-tabbar__item').on('click', function () {
            $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
        });    
    });
</script>

</html>